<template>
  <div class="userList">
    <div class="container">
      <li>
        <div class="pic">
          <img :src="src" alt="">
        </div>
        <div class="content">
          <p>{{ title }}</p>
          <p class="price">${{ price }}</p>
          <input type="button" value="删除" @click="getDel(id)">
        </div>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id', 'title', 'price', 'src'],
  name: 'UserList',
  methods: {
    getDel(val) {
      this.$emit('getDel', val)
    }
  }
}
</script>

<style scoped>
.goodList {
  list-style: none;
}
.container li {
  display: flex;
  flex-direction: row;
  padding: 5px;
  padding-top: 5px;
  border-bottom: 1px dashed silver;
  background-color: #fff;
}

.pic {
  flex-basis: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
.pic img {
  width: 100px;
  height: 100px;
}
.content {
  padding-left: 10px;
}
.content p {
  margin: 0;
}
.price {
  color: #f00;
}
input[type='button'] {
  width: 40px;
  color: #fff;
  background-color: coral;
  border: none;
}
</style>